<template>
  <div>
    <SkyCardPanel title="左侧标签页">
      <div slot="main">
        <SkyLeftTabs v-model="current" :render="renderFunc">
          <SkyLeftTabPane label="经营状况" name='first'>经营状况页面</SkyLeftTabPane>
          <SkyLeftTabPane label="历史汇总" name="second" :disabled="true">历史汇总页面</SkyLeftTabPane>
          <SkyLeftTabPane label="审计方案" name="third">审计方案页面</SkyLeftTabPane>
          <SkyLeftTabPane label="方案审批" name="four">方案审批页面</SkyLeftTabPane>
        </SkyLeftTabs>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //左侧标签页
              
              &lt;SkyLeftTabs v-model="current" :render="renderFunc"&gt;
                &lt;SkyLeftTabPane label="经营状况" name='first'&gt;经营状况页面&lt;/SkyLeftTabPane&gt;
                &lt;SkyLeftTabPane label="历史汇总" name="second"   :disabled="true"  &gt;历史汇总页面&lt;/SkyLeftTabPane&gt;
                &lt;SkyLeftTabPane label="审计方案" name="third"&gt;审计方案页面&lt;/SkyLeftTabPane&gt;
                &lt;SkyLeftTabPane label="方案审批" name="four"&gt;方案审批页面&lt;/SkyLeftTabPane&gt;
              &lt;/SkyLeftTabs&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //左侧标签页
              
              export default {
                data () {
                  return {
                    current: 'first'
                  }
                },
                methods: {
                  renderFunc (h, label) {
                    const TYPE_MAP = {
                      '经营状况':&lt;sky-icon-font name="laoying" &gt;&lt;/sky-icon-font&gt;,
                      '历史汇总':&lt;sky-icon-font name="laoying" &gt;&lt;/sky-icon-font&gt;,
                      '审计方案':&lt;sky-icon-font name="laoying" &gt;&lt;/sky-icon-font&gt;,
                      '方案审批':&lt;sky-icon-font name="laoying" &gt;&lt;/sky-icon-font&gt;,
                    };
                    return (
                      &lt;div&gt;{TYPE_MAP[label]}&lt;/div&gt;
                    )
                  }
                },
              }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
export default {
  data () {
    return {
      current: 'first'
    }
  },
  methods: {
    renderFunc (h, label) {
      const TYPE_MAP = {
        '经营状况': <sky-icon-font name="laoying" ></sky-icon-font>,
        '历史汇总': <sky-icon-font name="laoying" ></sky-icon-font>,
        '审计方案': <sky-icon-font name="laoying" ></sky-icon-font>,
        '方案审批': <sky-icon-font name="laoying" ></sky-icon-font>,
      };
      return (
        <div>{TYPE_MAP[label]}</div>
      )
    }
  },
}
</script>

<style lang="scss" scoped>
</style>